<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-03-02 
 -->


<template>
  <div style="height: inherit;">
  </div>
</template>

<script>
import * as echarts from "echarts";
import datas, {format} from "./data";

const labelSetting = {
  show: true,
  position: 'top',
  offset: [10, 0],
  fontSize: 16,
  formatter: (param) => format(param.data.value),
};
function makeOption() {
  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (param) => {
      const { marker,axisValueLabel, value, color} = param[0];
      return `
        ${marker} IP主机：<span style="color: ${color}">${axisValueLabel}</span></br>
        ${marker} 流量统计：<span style="color: ${color}">${format(value)}</span></br>
        `
    } },
    grid: {top: '25%', left: '2%', right: "30%", bottom: '3%', containLabel: true},
    yAxis: {
      splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    xAxis: {
      splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false },
    },
    animationDurationUpdate: 500,
    animationDuration: 0,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    series:[]
  };
}
const colorAry = ['#2A89F3', '#85B4D9', "#FFC358", '#42DA9D', '#5384D2', '#6B768A', '#21B5C8', '#84B0D7'];
export default {
  name: "stackedBar",
  data() {
    return {
      chart: null,
    };
  },

  mounted() {
    this.init();
    this.initChart();
  },

  methods: {
    init() {
      let chart = echarts.init(this.$el);
      this.chart = chart;
    },
    init1(chart) {
      const title = datas.slice(0, 6).map(v => v['ip']);
      const label = datas.slice(0, 6).map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 20, style: { text: '· '+v['ip'] + '：', fill: "#5e6d82",font: '13px "STHeiti", sans-serif, bold', textHeight: 35, textLineHeight: 35}}));
      const value = datas.slice(0, 6).map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 135, style: { text: format(v.Size), fill: colorAry[i], textHeight: 35, textLineHeight: 35}}));
      const option = {
        ...makeOption(),
        title: { text: "name" },
        yAxis: {
          type: "value",
          axisLabel: { show: true, formatter: (label) => format(label)},
          splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
          axisPointer: { label: { show: true, margin: 30 } }
        },
        xAxis: {
          boundaryGap: true,
          type: 'category',
          data: datas.slice(0, 6).map(item => item.ip),
          splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
          axisLabel: { show: true, margin: 30, fontSize: 14 },
        },
        graphic: [{
          type: 'group', top: 30, right: 5, children: [
            {
              type: 'rect',
              top: 15,
              shape: { r: [0, 0, 0, 0], width: 220, height: 21 * (title.length + 1) + 10 },
              cursor: 'auto',
              style: {
                fill: "#fff",
                stroke: '#909399',
                lineWidth: 1,
                shadowBlur: 8,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            },
            ...label,
            ...value
          ]
        }],
        series: [
          {
            type: "bar",
            stack: 'Total',
            smooth: true,
            label: labelSetting,
            showBackground: true,
            barGap: '10%',
            barWidth: "40",
            symbolRepeat: true,
            symbolSize: ['80%', '60%'],
            barCategoryGap: '20%',
            universalTransition: { enabled: true, delay: (idx, total) => (idx / total) * 1000 },
            data: datas.slice(0, 6).map((item, index) => ({value: item.Size, name: item.ip, itemStyle: {color: colorAry[index]}}))
          },
        ]
      }
      chart.setOption(option);
      return option;
    },
    init2(chart) {
      const title = datas.slice(0, 6).map(v => v['ip']);
      const label = datas.slice(0, 6).map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 20, style: { text: '· '+v['ip'] + '：', fill: "#5e6d82",font: '13px "STHeiti", sans-serif, bold', textHeight: 35, textLineHeight: 35}}));
      const value = datas.slice(0, 6).map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 135, style: { text: format(v.Size), fill: colorAry[i], textHeight: 35, textLineHeight: 35}}));
      const option = {
        ...makeOption(),
        title: { text: "name" },
        yAxis: {
          type: "value",
          axisLabel: { show: true,formatter: label => format(label)},
          splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
          axisPointer: { label: { show: true, margin: 30 } }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: datas.slice(0, 6).map(item => item.ip),
          splitLine: { show: true, lineStyle:{ color: colorAry, width: 1, type: 'solid' } },
          axisLabel: { show: true, margin: 30, fontSize: 14 },
        },
        graphic: [{
          type: 'group', top: 30, right: 5, children: [
            {
              type: 'rect',
              top: 15,
              shape: { r: [0, 0, 0, 0], width: 220, height: 21 * (title.length + 1) + 10 },
              cursor: 'auto',
              style: {
                fill: "#fff",
                stroke: '#909399',
                lineWidth: 1,
                shadowBlur: 8,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            },
            ...label,
            ...value
          ]
        }],
        series: [
          {
            type: 'line',
            stack: 'Total',
            label: labelSetting,
            smooth: true,
            showBackground: true,
            lineStyle: {width: 0},
            showSymbol: false,
            areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(128, 255, 165)' }, {  offset: 1, color: 'rgb(1, 191, 236)' } ]) },
            universalTransition: { enabled: true, delay: (idx, total) => (idx / total) * 1000 },
            emphasis: { focus: 'series' },
            data: datas.slice(0, 6).map((item, index) => ({value: item.Size, name: item.ip, itemStyle: {color: colorAry[index]}}))
          },
        ]
      }
      chart.setOption(option);
      return option;
    },
    initChart() {
      const options = [this.init1, this.init2];
      let index = 0;
      options[index](this.chart);
      setInterval(() => {
        index = (index + 1) % options.length;
          options[index](this.chart);
      }, 2500);
    },
  },
  //  End
};
</script>

<style lang='css' scoped>
</style>
